import React from 'react';

import styles from './index.less';

const LabelValue = ({
    label,
    value = '-',
    labelInline = false,
    labelAlignItems = 'flex-start',
    labelStyles = {},
    className = ''
}) => (
    <div className={`${styles.labelAndValueWrapper} ${className}`} style={{ alignItems: labelAlignItems }}>
        <span style={{ ...(labelInline === true ? { width: 'auto' } : ''), ...labelStyles }}>{label}：</span>
        {typeof value === 'string' ? (
            <span
                // eslint-disable-next-line react/no-danger
                dangerouslySetInnerHTML={{
                    __html: value === '' ? '-' : value?.replace(/[\r\n]+/g, '<br />')
                }}
            ></span>
        ) : (
            <span>{value}</span>
        )}
    </div>
);

export default LabelValue;
